<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./css/index.css">
  <title>银联支付</title>
</head>
<body>
  <div class="pay-box">
    <img src="./img/timg.jpg" alt="" class="timg-log">
    <div class="pay-form">
      <form action="#" method="post" id="pay-form">
        <input type="number" placeholder="请输入充值金额" class="pay-input">
        <!-- <input type="submit" value="Submit" /> -->
        <div class="pay-num-item">
          <span>100元</span>
          <span>499元</span>
          <span>999元</span>
          <span>1499元</span>
          <span>1999元</span>
          <span>2999元</span>
        </div>
      </form>
      <button class="pay-button">立即充值</button>
    </div>
    <!-- 提示模态框 -->
    <div class="x-mask">
      <div>
        <div class="x-mask-text">请输入充值金额且不少于100元!</div>
        <div class="x-mask-confirm">确定</div>
      </div>
    </div>
    <!-- loading组件 -->
    <div class="x-loading" style="display: none;">
      <div class="x-loading-wrapper" style="padding: 15px;">
        <span class="x-loading-spin">
          <div class="x-spinner-snake" style="border-top-color: rgb(204, 204, 204); border-left-color: rgb(204, 204, 204); border-bottom-color: rgb(204, 204, 204); height: 32px; width: 32px;">
          </div>
        </span>
      </div>
      <div class="x-loading-mask"></div>
    </div>
  </div>
</body>
</html>
<script src="./lib/jquery-3.3.1.min.js"></script>
<script>
  // 快捷选择金额
  $('.pay-num-item span').on('click', function () {
    var num = $(this).text().split('元')[0];
    $('.pay-input').val(num);
    $('.pay-num-item span').removeClass('active');
    $(this).addClass('active');
  })
  // 确认提示框
  $('.x-mask-confirm').on('click', function() {
    var num = $('.pay-input').val();
    $('.x-mask').hide();
    if (num > 3000) {
      $('.pay-input').val(3000);
    } else if (num < 100) {
      $('.pay-input').val(100);
    }
  })
  // 充值提交
  $('.pay-button').on('click', function(){
    var payNum = $('.pay-input').val();
    console.log($('#pay-form').serialize());
    if (payNum && payNum >= 100 && payNum <= 3000) {
      // 加载loading
      $('.x-loading').show();
      $.ajax({
        type: "POST",
        url: "url",
        data: "data",
        dataType: "dataType",
        success: function (response) {
          // 关闭loading
          $('.x-loading').hide();
        }
      });
    } else if (payNum > 3000) {
      $('.x-mask-text').text('充值金额不能大于3000！')
      $('.x-mask').show();
    } else {
      $('.x-mask').show();
    }
  })
</script>